<template>
    <div class="container">
        <el-tabs v-model="currentTab">
            <el-tab-pane
                label="待处理"
                name="todo"
            />
            <el-tab-pane
                label="已处理"
                name="done"
            />
        </el-tabs>
        <keep-alive>
            <component
                :is="currentTabComponent"
                :params="params"
            />
        </keep-alive>
    </div>
</template>

<script>
import { computed, reactive, toRefs } from '@vue/composition-api';
import Done from './done';
import Todo from './todo';

const assignStatus = {
    Todo: 0,
    Done: 1,
};
export default {
    components: {
        Done, Todo,
    },
    setup () {
        const tab = new URLSearchParams(window.location.search).get('tab');
        const tabs = Object.keys(assignStatus).map(key => key.toLowerCase());
        const isInclude = (tabs, tab) => tabs.includes(tab);
        const currentTab = (isInclude(tabs, tab) ? tab : tabs[0]).toLowerCase();
        const state = reactive({
            currentTab,
            currentTabComponent: computed(() => state.currentTab),
            params: 'zs',
        });
        return {
            ...toRefs(state),
        };
    },
};
</script>

<style lang="scss" scoped>
    .container {
        padding: 0 50px;
    }
</style>
